<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    {include file="public/static" /}
    <style>
        .layui-card-header{
            padding-left: 2rem;
        }
        #submitButton{
            float: right;
            margin-top: 0.5rem;
        }
        #result{
            color: #ff0000;
            font-size: 0.9rem;
            display: none;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <form class="layui-form">
                    <div class="layui-card-header">
                        <div class="layui-input-inline">
                            <input type="hidden" class="table" name="table" value="{$Request.param.table}">
                            <input class="features" type="checkbox" name="features[list]" value="list" lay-filter="features"  lay-skin="primary">列表
                            <input class="features" type="checkbox" name="features[add]" value="add" lay-filter="features"  lay-skin="primary">新增
                            <input class="features" type="checkbox" name="features[edit]" value="edit" lay-filter="features"  lay-skin="primary">编辑
                            <input class="features" type="checkbox" name="features[del]" value="del" lay-filter="features"  lay-skin="primary">删除
                            <input class="features" type="checkbox" name="features[delAll]" value="delAll" lay-filter="features"  lay-skin="primary">批量删除
                            <input class="features" type="checkbox" name="features[export]" value="export" lay-filter="features"  lay-skin="primary">导出
                        </div>
                        {eq name="check" value="1"}
                            <button id="submitButton" class="layui-btn" lay-filter="add" lay-submit="">创建</button>
                        {/eq}
                    </div>
                    <div class="layui-card-header" id="result"></div>
                    <div class="layui-card-body layui-table-body">
                        <table class="layui-table">
                            <tbody>
                                <tr>
                                    <th width="30">
                                        <input type="checkbox" lay-filter="checkbox" lay-skin="primary">
                                    </th>
                                    <th>字段名</th>
                                    <th>类型</th>
                                    <th>备注</th>
                                    <th width="150">组件</th>
                                </tr>
                            </tbody>
                            <tbody>
                                {volist name="info" id="vo"}
                                    <tr>
                                        <td>
                                            <input class="checkbox-id" type="checkbox" value="{$vo.Field}" lay-skin="primary">
                                        </td>
                                        <td>{$vo.Field}</td>
                                        <td>{$vo.Type}</td>
                                        <td>{$vo.Comment}</td>
                                        <td>
                                            <select name="{$vo.Field}" class="components">
                                                <option value="1">文本框</option>
                                                <option value="2">下拉框</option>
                                                <option value="3">复选框</option>
                                                <option value="4">单选框</option>
                                                <option value="5">文本域</option>
                                            </select>
                                        </td>
                                    </tr>
                                {/volist}
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    //表单
    layui.use(['form', 'layer'], function() {
        $ = layui.jquery;
        var form = layui.form,  layer = layui.layer;
        //全选按钮
        form.on('checkbox(checkbox)', function (data) {
            $(".checkbox-id").each(function () {
                this.checked = data.elem.checked;
            });
            form.render('checkbox');
        });
        //监听提交
        form.on('submit(add)', function() {
            $("#result").hide().html("");
            //获取checkbox值
            let checked = getCheckboxField();
            if(checked.length <= 0){
                layer.msg("请选择需要创建的字段", {icon: 5, time: 1500});
                return false
            }
            //过滤没有勾选的字段组件
            let components = filterField(checked);
            //获取勾选的CURD功能
            let features = getFeatures();
            if(Object.keys(features).length <= 0){
                layer.msg("请选择需要创建的CURD功能", {icon: 5, time: 1500});
                return false
            }
            layer.prompt({title: '请输入创建类的中文别名', formType: 3}, function(pass, index){
                layer.close(index);
                let table = $(".table").val();
                //发异步，把数据提交给php
                layer.confirm('确认以【'+table+'】表创建HTML吗？',function(){
                    layer.load();
                    $.ajax({
                        type:"post",
                        url:"{:url('Create/createCurd')}",
                        data: {tableName: table, cnTableName:pass, features: features, components: components},
                        dataType: 'json',
                        success:function (data) {
                            $("#result").show().html(data); //输出信息
                            layer.closeAll();
                        },
                        error:function (data) {
                            layer.msg("不好意思，出现了一点问题", {icon: 5}, function () {
                                layer.closeAll();
                            });
                        }
                    });
                });
            });
            //必须加上return false，不然无法关闭iframe
            return false;
        });
    });
    /*获取勾选的字段值*/
    function getCheckboxField() {
        //获取checkbox值
        var checked = [];
        $(".checkbox-id:checked").each(function(){
            checked.push($(this).val());
        });
        //去掉数组中空值，全选checkbox框需要value=""
        checked = checked.filter(item=>item);
        return checked
    }
    /*过滤没有勾选的字段组件*/
    function filterField(checked) {
        var components = []
        $(".components").each(function (index, item) {
            components[item.name] = {name:item.name, value:item.value}
        })
        //过滤未勾选
        var array = {}
        checked.forEach(function (item, index) {
            if(item != components[item]){
                array[item] = components[item].value
            }
        })
        return array
    }
    /*获取勾选功能*/
    function getFeatures() {
        var features = {}
        $(".features").each(function () {
            if($(this).is(":checked")){
                var v = $(this).val()
                features[v] = true
            }
        })
        return features
    }
</script>
</html>